<template>
    <div>
        <div style="margin-top: 20px;text-align: left;margin-left: 40px;">
            <el-form :inline="true" :model="selectForm">
                <el-form-item label="公告标题">
                    <el-input v-model="selectForm.noticeTitle" clearable @clear="getNotificationList"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" style="margin-left: 20px;">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <!--卡片区域-->
            <el-card style="margin-top: 10px;">
                <!--用户列表区域-->
                <el-table :data="NotificationList.slice((pagenum-1)*pagesize,pagenum*pagesize)" :border="true" stripe>
                    <el-table-column type="index"></el-table-column>
                    <el-table-column label="标题" prop="noticeTitle"></el-table-column>
                    <el-table-column label="修改人" prop="updatePerson"></el-table-column>
                    <el-table-column label="修改时间" prop="updateTime"></el-table-column>
                    <el-table-column label="上传人" prop="uploadPerson"></el-table-column>
                    <el-table-column label="上传时间" prop="uploadTime"></el-table-column>
                    <el-table-column label="操作" width="90px">
                        <template slot-scope="scope">
                            <!--查看按钮-->
                            <el-button type="primary" icon="el-icon-view" size="mini"
                                @click="getNotification(scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 详情弹窗 -->
                <el-dialog v-model="dataSon" :title=dataSon.noticeTitle :visible.sync="dialogFormVisible"
                    style="text-align: center;">
                    <div style="margin-top: -35px;">
                        <el-tabs v-model="activeName">
                            <!-- 正文 -->
                            <el-tab-pane label="正文" name="notice_content">
                                <div style="text-align: left">
                                    <span>{{dataSon.noticeContent}}</span>
                                </div>
                                <div style="text-align: left; margin-top: 20px;">
                                    <span>著作人：{{dataSon.updatePerson}}</span>
                                    <span style="margin-left: 15px;">发布时间：{{dataSon.uploadTime}}</span>
                                    <span style="margin-left: 15px;">修改时间：{{dataSon.updateTime}}</span>
                                </div>
                            </el-tab-pane>
                            <!-- 阅读情况栏 -->
                            <el-tab-pane v-if="sta" label="阅读情况" name="read_status">
                                <div style="text-align: right">
                                    <el-radio-group v-model="radio">
                                    <el-radio :label="1" @click.native.prevent="selectByRead(radio)"
                                       ><span style="color: #67C23A;">已阅读:</span>{{read}}</el-radio>
                                    <el-radio :label="0" @click.native.prevent="selectByUnRead(radio)"><span style="color: #F56C6C;">未阅读:</span>{{unread}}</el-radio>
                                    </el-radio-group>
                                </div>
                                <div>
                                    <el-table :data="tableData.slice((pagenum1-1)*pagesize1,pagenum1*pagesize1)" stripe
                                        style="width: 100%">
                                        <el-table-column label="序号" type="index">
                                        </el-table-column>
                                        <el-table-column prop="nickName" label="姓名" width="180">
                                        </el-table-column>
                                        <el-table-column prop="status" label="阅读情况">
                                            <template slot-scope="scope">
                                                <div :style="{ color: scope.row.status ==1|| scope.row.status=='已阅读'? '#67C23A' : '#F56C6C'}">
                                                  {{ scope.row.status==1||scope.row.status=='已阅读' ? "已阅读" : "未阅读" }}
                                                </div>
                                              </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                                <!-- 弹窗分页 -->
                                <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
                                    :current-page="pagenum1" :page-sizes="[1,2,5,10]" :page-size="pagesize1"
                                    layout="total, sizes, prev, pager, next, jumper" :total="total1" style="margin-top: 5px;">
                                </el-pagination>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <!-- 关闭按钮 -->
                    <div slot="footer" class="dialog-footer" style="text-align: left; margin-top: -35px;">
                        <div style="text-align: center; margin-top: 5px;">
                            <el-button @click="dialogFormVisible = false">关闭</el-button>
                        </div>
                    </div>
                </el-dialog>

                <!--分页区域-->
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pagenum" :page-sizes="[1,2,5,10]" :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total"
                    style="margin-top: 10px; text-align: center;">
                </el-pagination>

            </el-card>
        </div>
    </div>
</template>
<script>
    import { GetNotificationInfoListAPI } from '@/components/utils/api/notice_api.js'
    import { PostReadAPI, GetReadAPI } from '@/components/utils/api/read_api.js'
    export default {
        data() {
            return {
                sta: false,
                readList:[],
                unReadList:[],
                total1: 1,
                pagesize1: 10,
                pagenum1: 1,
                read: '',
                unread: '',
                radio: 3,
                selectBy: '',
                NotificationList: [{}],
                total: 1,
                pagesize: 10,
                pagenum: 1,
                selectForm: {},
                dataSon: [],
                dialogFormVisible: false,
                activeName: 'notice_content',
                tableData: [{}],
                noticeId:''
            }
        },
        created() {
            this.getNotificationList()
            this.getLogin()
        },
        methods: {

            getLogin(){
                if(sessionStorage.getItem('token')){
                    this.sta = true
                }
                else if(sessionStorage.getItem('token') != true){
                    this.sta = false
                }
            },

            selectByRead(val){
                if(this.radio == 1){
                    this.radio = 2
                    this.getReadStatus()
                }
               else{
                this.radio = 1
                this.tableData = this.readList
                this.total1 = this.tableData.length
               }
            },

            selectByUnRead(val){
                if(this.radio == 0){
                    this.radio = 3
                    this.getReadStatus()
                }
               else{
                this.radio = 0
                this.tableData = this.unReadList
                this.total1 = this.unReadList.length
               }
            },
            // 初始化通知列表
            getNotificationList() {
                GetNotificationInfoListAPI({}).then(res => {
                    this.NotificationList = res.data.data
                    this.total = this.NotificationList.length
                })
            },

            // 查看通知详情
            async getNotification(information) {
                this.noticeId = information.id
                this.dialogFormVisible = true
                this.dataSon = information
                if(sessionStorage.getItem('token')!=null){
                    var params = {
                    refId: information.id,
                    operation: 1,
                    refType: "notification",
                    status: 0
                }
                await PostReadAPI(params).then(res => {
                    // console.log("res", res)
                    
                })
                this.getReadStatus()
                }
            },

            // 获取阅读情况
            getReadStatus(){
                GetReadAPI({
                    refId: this.noticeId
                }).then(res => {
                    console.log(res)
                    this.readList = res.data.data.readList
                    this.unReadList = res.data.data.unreadList
                    this.tableData = res.data.data.list
                    this.read = res.data.data.read
                    this.unread = res.data.data.unread
                    this.total1 = this.tableData.length
                    this.tableData.forEach(element => {
                        if (element.status == 0) {
                            element.status = "未阅读"
                        }
                        else if (element.status != 0) {
                            element.status = "已阅读"
                        }
                    });
                })
            },

            // 根据条件查询
            onSubmit() {
                var params = {
                    noticeTitle: this.selectForm.noticeTitle
                }
                GetNotificationInfoListAPI(params).then(res => {
                    this.NotificationList = res.data.data
                    this.total = this.NotificationList.length
                })
            },

            //监听pagesize改变的事件
            handleSizeChange(newSize) {
                this.pagesize = newSize
            },

            //监听页码值改变的事件
            handleCurrentChange(newPage) {
                this.pagenum = newPage
            },

            //监听pagesize改变的事件
            handleSizeChange1(newSize) {
                this.pagesize1 = newSize
            },

            //监听页码值改变的事件
            handleCurrentChange1(newPage) {
                this.pagenum1 = newPage
            },

        }
    }
</script>